import { useSearchParams } from "@/router/hooks";
import { Button, Card, Col, Divider, Flex, Space, Typography } from "antd";
import styled from "styled-components";
import { useQuery } from "@tanstack/react-query";
import { useMenuActions } from '../../store/menuStore';
import { useEffect, useState } from "react";

import largeScreenImg from '@/assets/images/layout/largeScreen.jpg';
import { ModalForm, ProForm, ProFormSelect, ProFormText } from "@ant-design/pro-components";
const LargeScreen = () => {
  const [appList, setAppList] = useState(localStorage.getItem('custom_app_list') ? JSON.parse(localStorage.getItem('custom_app_list')) : [])
  const menus = []

  useEffect(() => {
    window.microApp.addDataListener(onAppMessage)
    return
  }, [menus])
  useEffect(() => {
    window.microApp.addDataListener(onAppMessage)
    return () => {
      window.microApp.removeDataListener(onAppMessage)
    }
  }, [])

  const onAppMessage = (e) => {
    console.log(e)
  }

  const openAppPage = (d) => {
    // 强制发送
    // window.microApp.forceDispatch({ age: 20 })
    // window.microApp.dispatch({ age: 20 })
    window.microApp.forceDispatch({
      screenData: {
        type: 'routerTo',  // 必须为 routerTo
        url: d.url, // 需要跳转的地址
        name: d.name,
        code: d.code,
        routerMethod: d.routerMethod, // 加载方式 1嵌入到iframe 2直接打开url 地址
        openMethod: d.openMethod,  // 打开方式 1当前窗口打开 2新建窗口打开
      }
    })
  }

  const sendToMessage = (values) => {
    // 强制发送
    // window.microApp.forceDispatch({ age: 20 })
    // window.microApp.dispatch({ age: 20 })
    // 清空当前子应用发送给主应用的数据
    window.microApp.clearData()
    window.microApp.forceDispatch({
      sendMessage: {
        message: values.message,
        target: values.target,
      }
    })
    return true
  }



  return <StyleWrap>
    <Flex justify="center" align="center" style={{ height: '100%' }}>
      <Typography.Title type="secondary" color="secondary" level={3} style={{ whiteSpace: 'nowrap' }}>
        态势大屏
      </Typography.Title>
      {/* <Card className="menuFloat">
        <Space style={{ width: '300px' }}>
          <ModalForm
            trigger={<Button type="primary">发送信息</Button>}
            title="发送消息到应用"
            width={400}
            modalProps={{ destroyOnClose: true }}
            onFinish={sendToMessage}
            grid={true}
          >
            <ProFormText name={'message'} label="消息内容"></ProFormText>
            <ProFormSelect label="目标" name="target" options={[{ label: '全部应用', value: 'all' }].concat(appList.map(d => ({ label: d.name, value: d.code })))} />
          </ModalForm>
          <ModalForm
            trigger={<Button type="primary">新增子应用</Button>}
            title="新增子应用"
            width={400}
            modalProps={{ destroyOnClose: true }}
            onFinish={(values) => {
              const list = localStorage.getItem('custom_app_list') ? JSON.parse(localStorage.getItem('custom_app_list')) : []
              localStorage.setItem('custom_app_list', JSON.stringify([...list, values]))
              setAppList([...list, values])
              return true
            }}
            grid={true}
          >
            <ProFormText name={'name'} label="应用名称" rules={[{ required: true, message: '请输入应用名称' }]}></ProFormText>
            <ProFormText name={'url'} label="应用地址" rules={[{ required: true, message: '请输入应用地址' }]}></ProFormText>
            <ProFormText name={'code'} label="应用编码" rules={[{ required: true, message: '请输入应用地址' }]}></ProFormText>
          </ModalForm>
          <Button onClick={() => {
            setAppList([])
            localStorage.removeItem('custom_app_list',)
          }
          } danger>清空子应用</Button>
        </Space>
        <Divider />
        <Space>
          <Button onClick={() => openAppPage({ url: '/integration/mixture', name: '综合应用', code: 'mixture' })}>综合应用</Button>
          {appList.map(d => (<Button onClick={() => openAppPage(d)} key={d.code}>{d.name}</Button>))}
        </Space>
        <Divider />
        <div className="menuFloatBody">
          {!!menus && menus.map(menu => {
            return <div className="menuWrap" key={menu.id}>
              <div className="menuTitle">{menu.name}</div>
              {!!menu.children && menu.children.map(d => (<div key={d.id} className="menuItem" onClick={() => openAppPage(d)}>{d.name}</div>))}
            </div>
          })}
        </div>
      </Card> */}
    </Flex>
  </StyleWrap>;
}

const StyleWrap = styled.div`
  width: 100%;
  height: 100vh;
  position: relative;
  background-image: url(${largeScreenImg});
  background-size: cover;
  background-position: center;
  .menuFloat{
    position: absolute !important;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    .menuFloatBody {
      display: flex;
    }
    .menuWrap{
      margin: 0 30px;
    }
    .menuTitle{
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      white-space: nowrap;
    }
    .menuItem{
      margin-top: 10px;
      white-space: nowrap;
      cursor: pointer;
    }
  }
`

export default LargeScreen;